<template>
	<view class="uni_box home">
		<!-- <image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" /> -->
		<navbar title='订单详情' :backgroundColor='backgroundColor'>
		</navbar>
		<view class="content">
			<view class="zhaoone">
				<view class="ywxian" v-if="info.insuranceist==1">
					<image class="img_bjbao" src="@/pages_admin/static/img_bxbj.png" />
					<view class="baoview">
						<image class="icON_bz" src="@/pages_admin/static/bzhang.png" />
						<text class="jianame">用工意外保障已生效</text>
						<text class="jianame lv">24小时内有效</text>
						<text class="jianame lv ml">由众安保险承保</text>
						<image class="icon_lvnext" src="@/pages_admin/static/icon_lvnext.png" />
					</view>
				</view>
				<view class="titwo" v-if="info">
					<view class="tiebiao">
						<text class="gnamenew">{{info.title}}</text>
						<view class="xq" @click="getdetail()">
							<text>详情</text>
							<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
						</view>
					</view>
					
					<view class="renlist">
						
						<image class="oqian" src="@/pages_admin/static/oqian.png" />
						<!-- <text class="rentit">开始时间</text> -->
						<view class="rval">
							<text class="renval yanse" :class="info.settlement=='记件'?'lvtxt':''">{{ info.price_text }}</text>
						</view>
						
					</view>
					<view class="renlist">
						<image class="oqian" src="@/pages_admin/static/otime.png" />
						<!-- <text class="rentit">结束时间</text> -->
						<view class="rval">
							<text class="renval">{{ info.time_text }}</text>
						</view>
						
					</view>
					<view class="renlist">
						<image class="oqian" src="@/pages_admin/static/icno_dz.png" />
						<!-- <text class="rentit">工作地点</text> -->
						<text class="renval" style="max-width: 85%;display: inline-block;">{{ info.address_text }}</text>
						<image class="icon_fz" src="@/pages_admin/static/icon_fz.png" @click="copy(info.address_text)" />
						<!-- <image class="icon_fz" src="@/pages_client/static/img/icon_dh.png" /> -->
					</view>
					<!-- <view class="renlist">
						<text class="rentit">计时工价</text>
						<text class="renval">{{info.price}}元/{{ info.settlement==1?'小时':'件' }}</text>
					</view>
					<view class="renlist">
						<text class="rentit">年龄限制</text>
						<text class="renval">{{info.age_label}}</text>
					</view>
					<view class="renlist">
						<text class="rentit">性别限制</text>
						<text class="renval">{{info.gender_label}}</text>
					</view> -->
				</view>
				<view class="tab">
					<u-tabs :list="tablist" bg-color="none" :is-scroll="false" :current="current" @change="change" active-color="rgba(255, 77, 67, 1)" inactive-color="#999999"></u-tabs>
				</view>
			</view>
			<view class="olist">
				<view class="oitem" v-for="(item,index) in list" :key="index"  @click.stop="getyuangong(item)">
					<view class="ohead">
						<view class="yijie">{{item.status_text}}</view>
						<image class="icon_jf" :src="item.avatar!=''?item.avatar:'@/pages_admin/static/icon_jf.png'" />
						<view class="yinav">
							<text class="name">{{item.nickname}}</text>
							<view class="jienav">
								<view class="bq" v-if="item.gender">{{ item.gender }}</view>
								<view class="bq" v-if="item.age">{{item.age}}岁</view>
								<view class="bq sxiao" v-if="item.insuranceist_status>=1">
									<image class="icon_bz_s" src="@/pages_admin/static/icon_bz_s.png" />
									<text class="bname">{{item.insuranceist_status_text}}</text>
									<image class="icon_ck_s" src="@/pages_admin/static/icon_ck_s.png" />
								</view>
								<view class="xq">
									<text>详情</text>
									<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
								</view>
							</view>
						</view>
					</view>
					<text class="queren">{{item.step_text}}</text>
					<view class="ztbtn">
						<!-- <view class="btns" @click.stop="jiesuan">结算工资</view>
						<view class="btns">开除</view>
						<view class="btns">联系TA</view> -->
						<view class="btns" :style="{background: i.button_color,color:i.font_color}"  v-for="(i,ind) in item.button" @click.stop="getobtn(i,item)">{{ i.button_text }}</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="loadmore" />
			</view>
		</view>
		<view class="newbot">
			<view class="botti">
				<!-- <image class="bg" src="@/pages_client/static/img/img_bjda.png" /> -->
				<view class="tione">
					<!-- <view class="tihead">
						<text class="qname">请在<text class="qnum">10:00</text>前到达工作地点</text>
						<text class="wushuang">请勿爽约，否则会扣除信用分导致无法接单</text>
					</view> -->
					<view class="tibot">
						<view class="tiitem" @click="orderoperate(1)">
							<image class="giicon" src="@/pages_admin/static/icon_fy.png" />
							<text>费用明细</text>
						</view>
						<view class="tiitem" @click="orderoperate(2)">
							<image class="giicon" src="@/pages_admin/static/icon_wt.png" />
							<text>遇到问题</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="botview">
				<view class="yuwen" @click="getyuwen">
					<text class="lname">遇到问题？</text>
				</view>
				<view class="lianxi">
					<text class="lname">开工</text>
				</view>
			</view> -->
		</view>

		<view class="kaigongma" v-if="info.start_code_text">
			<text class="kainame">开工码</text>
			<text class="kainum">{{ info.start_code_text }}</text>
		</view>

		<!-- 提示弹窗 -->
		<u-popup  v-model="tishishow" mode="center" width="80%" ref="auth" :mask-close-able="true" :custom="true" :mask-click="false" @close="closetishi">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closetishi">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">温馨提示</text>
                    <view class="queli">
                        <view class="queitem">
                            <text>员工还未完工，确定提前终止用工? 请确保已和员工沟通协商一致!</text>
                        </view>
                    </view>
                    <view class="dianbtn"  @click="getzhongzhi">
                        <text class="bm">确认</text>
                    </view>
                    <text class="kaolv"  @click="closetishi">取消</text>
                </view>
                
            </view>
        </u-popup>
		<!-- 结算提示 -->
		<u-popup  v-model="jiesuanshow" mode="center" width="80%" ref="auth" :mask-close-able="true" :custom="true" :mask-click="false" @close="closejiesuan">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closejiesuan">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">结算提醒</text>
                    <view class="queli">
                        <view class="queitem">
                            <text>已终止用工,立即去结算工资?</text>
                        </view>
                    </view>
                    <view class="dianbtn"  @click="getjiesuan">
                        <text class="bm">结算工资</text>
                    </view>
                    <text class="kaolv"  @click="closejiesuan">稍后结算</text>
                </view>
                
            </view>
        </u-popup>

		<!-- 替他开工 -->
		<u-popup  v-model="tikaishow" mode="bottom" width="100%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closetikai">
			<view class="popone-new">
                <view class="phonenav-new">
                    <view class="cha" @click="closetikai">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <view class="kaiview">
                        <text class="jiename">替TA开工</text>
                    </view>
                    <view class="renlian">
                        <image class="img_sczjz" src="@/pages_admin/static/img_ttkg.png" mode="widthFix" />
                        <text>碰上员工无法开工打卡?
							可尝试替TA开工</text>
                    </view>
                    <view class="dianbtn" @click="getquedin()">
                        <text class="bm">确认</text>
                    </view>
                </view>
                
            </view>
		</u-popup>
		<!-- 开除弹窗 -->
		<u-popup  v-model="kaichushow" mode="center" width="80%" ref="auth" :mask-close-able="true" :custom="true" :mask-click="false" @close="closekaichu">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closekaichu">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">开除员工</text>
                    <view class="queli-new">
						<u-input v-model="des" type="text" placeholder='请输入开除原因' />
                    </view>
                    <view class="dianbtn"  @click="getkaichu">
                        <text class="bm">确认</text>
                    </view>
                    <text class="kaolv"  @click="getlahei">开除并拉黑</text>
                </view>
                
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				swlist: [{
						image: '/static/banner.png',
					},
					{
						image: '/static/banner.png',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				tablist: [{
					name: '已接单'
				}, {
					name: '待结算'
				}, {
					name: '已结算'
				}, {
					name: '已取消'
				}],
				current: 0,
				backgroundColor:'#fff',
				phoneshow:false,
				ordershow:false,
				timestamp:86400,
				id:'',
				info:{},
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				tishishow:false,
				tikaishow:false,
				popid:'',
				kaichushow:false,
				des:'',//开除原因
				user_id:'',//拉黑
				jiesuanshow:false,
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			this.getorderdetail()
			this.yghead();//员工订单状态
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async yghead(){
				let res = await this.$u.api.getTaskOrderStatus({
				});
				this.tablist = res.data
				this.getList()
			},
			async getList(){
				let res = await this.$u.api.getTaskOrderList({
					task_id:this.id,
					status:this.tablist[Number(this.current)].value,
					limit:this.limit,
					page:this.page,
				});
				let list = res.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];	
				console.log(this.list)
				if(res.list==''||Number(list.length)<Number(this.limit)){
					this.status = 'nomore';
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			async getorderdetail(){
				
				let res = await this.$u.api.agetInfo({
					id:this.id
				});
				this.info = res.info

			},
			change(index) {
				this.current = index;
				this.getClear()
			},
			confrimOrderSucess(){
				this.navrouter("/pages_client/twoPage/OrderSucess");
			},
			orderoperate(e){
				if(e == 4){
					//飞单
					this.navrouter("/pages_client/twoPage/FlyReport");
				}else if(e == 2){
					//遇到问题
					this.navrouter("/pages_admin/twoPage/Problem");
				}else if(e == 1){
					//费用明细
					this.navrouter("/pages_admin/twoPage/FMingxi?task_id="+this.info.id);
				}
			},
			getorder(item){
				this.navrouter("/pages_admin/twoPage/OrderDetailTwo");
			},
			getyuangong(item){
				this.navrouter("/pages_admin/twoPage/OrderYuangongDetail?id="+item.id);
			},
			getdetail(){
				this.navrouter("/pages_admin/twoPage/OrderDetailTwo?id="+this.id);
				// this.navrouter("/pages_admin/twoPage/FabuJob");
			},
			jiesuan(){
				this.navrouter("/pages_admin/twoPage/SalarySettlement?popid="+this.popid+'&id='+this.id);
			},
			getobtn(e,item){
				let button_type = e.button_type;//kaichu开除 lianxi联系他
				if(button_type == 'kaichu'){
					this.popid = item.id
					this.user_id = item.user_id
					this.kaichushow = true
				}else if(button_type == 'lianxi'){
					this.getlianxi(item);
				}else if(button_type == 'ttkg'){
					//替他开工
					this.popid = item.id
					this.tikaishow = true
				}else if(button_type == 'jiesuan'){
					//结算
					this.popid = item.id
					this.jiesuan()
				}else if(button_type == 'tqzz'){
					//提前终止用工
					// stopTask
					this.popid = item.id
					this.tishishow = true
				}
			},
			async getquedin(){//替他开工接口缺少 
				let res = await this.$u.api.editWorkStatus({
					id:this.popid
				});
				this.$u.toast("操作成功");
				// this.current = 1
				this.getClear()
				this.tikaishow = false
			},
			closetishi(){
				this.tishishow= false
			},
			getjiesuan(){
				this.jiesuanshow = false
				this.jiesuan()
			},
			async getlianxi(item){
				let res = await this.$u.api.getOrderUser({
					id:item.id
				});
				let that = this
				uni.makePhoneCall({
					phoneNumber: res.mobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
						// 请求接口 报名成功
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			closetikai(){
				this.tikaishow = false
			},
			closejiesuan(){
				this.jiesuanshow=false
			},
			closekaichu(){
				this.kaichushow = false
			},
			async getkaichu(){
				//开除
				let res = await this.$u.api.dismissTask({
					id:this.popid,
					des:this.des
				});
				this.des = ''
				this.$u.toast("操作成功");
				this.getClear()
				this.kaichushow = false
				
			},
			async getzhongzhi(){
				//终止用工确认
				let res = await this.$u.api.stopTask({
					id:this.popid
				});
				this.$u.toast("操作成功");
				this.getClear()
				this.tishishow = false
				this.jiesuanshow = true
			},
			async getlahei(){
				//开除并 拉黑
				//开除
				let res = await this.$u.api.dismissTask({
					id:this.popid,
					des:this.des
				});
				let resd = await this.$u.api.addBlack({
					user_id:this.user_id
				});
				this.des = ''
				this.$u.toast("操作成功");
				this.getClear()
				this.kaichushow = false
			}
		},
		onPageScroll(e) {
			// console.log('页面滚动距离:', e.scrollTop);
			// 在这里编写滚动相关的逻辑
			// if(e.scrollTop>=100){
			// 	this.backgroundColor = '#ffffff'
			// }else{
			// 	this.backgroundColor = 'none'
			// }
			this.$forceUpdate()
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.bghome{
		width: 100%;
		position: absolute;
		top: 0;
		height: 550rpx;
		
	}
	.zhaoone{
		background-color: #fff;
		padding: 20rpx 0;
	}
	.content{
		// background-color: #fff;
		padding-bottom: 200rpx;
		position: relative;
		// padding-top: 20rpx;
		.gzuo{
			margin: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			.gzleft{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.icon_sj{
				width: 50rpx;
				height: 50rpx;
				margin-right: 8rpx;
			}
			.zname{
				font-weight: 500;
				font-size: 40rpx;
				color: #111111;
			}
			.icon_nexthui{
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
			.gzright{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				.yigzuo{
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					display: block;
					margin-bottom: 10rpx;
				}
			}
		}
		.lc{
			margin: 20rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.bq{
				width: 28rpx;
				height: 28rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 800;
				font-size: 22rpx;
				color: #FFEFE9;
				margin-right: 5rpx;
			}
			.bqname{
				font-weight: 500;
				font-size: 24rpx;
				color: #EA5918;
				display: inline-block;
				margin-right: 5rpx;
				white-space: nowrap;
			}
			.icon-xyb{
				width: 42rpx;
				height: 31rpx;
				margin-right: 9rpx;
			}
		}
		.tieone{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin: 24rpx 30rpx 0;
			.tname{
				font-weight: 800;
				font-size: 40rpx;
				color: #111111;
			}
			.bqitem{
				margin: 20rpx 0;
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: #F07F4C;
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;
				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
				}
			}
			
		}
		
		.ywxian{
			display: flex;
			// padding: 6rpx 15rpx;
			// background: #E9FFEB;
			// border-radius: 6rpx;
			align-items: center;
			// margin-top: 20rpx;
			position: relative;
			height: 80rpx;
			// padding: 0 15rpx;
			margin: 0 30rpx 24rpx;
			.img_bjbao{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.baoview{
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				width: 100%;
			}
			.icON_bz{
				margin-right: 6rpx;
				width: 24rpx;
				height: 24rpx;
			}
			.jianame{
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(17, 17, 17, 1);
			}
			.lv{
				color: rgba(22, 185, 37, 1);
			}
			.icon_lvnext{
				width: 20rpx;
				height: 20rpx;
			}
			
		}
		.dtwo{
			padding: 30rpx;
		}
		.dname{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.dfen{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 20rpx 0 0;
			.dfenitem{
				padding: 8rpx 20rpx;
				background: #EEEEEE;
				border-radius: 4rpx;
				margin-right: 20rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
			.gone{
				height: 26rpx;
				margin-right: 20rpx;
				width: 108rpx;
			}
			.dmiao{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.dthree{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.sname{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			.slist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.sitem{
					width: 50%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.ziname{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						min-width: 90rpx;
					}
					.zval{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						display: inline-block;
						margin-left: 8rpx;
					}
					.cha{
						font-weight: 500;
						color: #42ABDC;
					}
				}
			}
		}

		.dfour{
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.tou{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.dfnav{
				width: 60%;
				display: flex;
				flex-direction: column;
				.dfname{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.dfmiao{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.dfright{
				display: flex;
				margin-left: auto;
				flex-direction: row;
				align-items: center;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.icon_next{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.dfive{
			padding: 20rpx;
			.dcont{
				padding: 20rpx 0;
				border-top: 1rpx solid #eee;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		
	}
	.titwo{
		background: #F8F8F8;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		margin: 24rpx 30rpx 0;
		.anquan{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.icon_aq{
				margin-right: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.jubao{
				font-weight: bold;
				font-size: 24rpx;
				color: #999999;
			}
			.icon_nexthui{
				margin-left: 5rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.gname{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 30rpx;
		}
		.gnamenew{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
			
		}
		.tiebiao{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.xq{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
				}
				.icon_gd{
					width: 24rpx;
					height: 24rpx;
					margin-left: 5rpx;
				}
			}
		}
		.tishi{
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}
		.renlist{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			align-items: center;
			.rentit{
				display: inline-block;
				width: 130rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.renval{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				// max-width: 60%;
				white-space: normal;
			}
			.lv{
				font-weight: bold;
				font-size: 24rpx;
				color: #16B925;
			}
		}
		.icon_fz{
			width: 45rpx;
			height: 45rpx;
			margin-left: 20rpx;
		}
		.rval{
			display: flex;
			flex-direction: column;
			flex: 1;
			.sm{
				background: #FFEEE7;
				border-radius: 5rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5rpx 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-top: 9rpx;
			}
		}
		
		.renlist:last-child{
			margin-bottom: 0;
		}
		.flex-col{
			display: flex;
			flex-direction: column;
		}
		.ditishi{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			display: block;
			text-align: center;
			margin-top: 20rpx;
		}
		.dizhi{
			position: relative;
			width: 100%;
			margin-top: 20rpx;
			height: 155rpx;
			.dizhiicon{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.diitem{
				position: relative;
				padding: 40rpx 30rpx 20rpx 40rpx;
				display: flex;
				flex-direction: row;
				.dileft{
					width: 80%;
					display: flex;
					flex-direction: column;

				}
				.diname{
					max-width: 100%;
					display: block;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
				.dimiao{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 10rpx;
				}
				.chadi{
					margin-left: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon_dw{
						width: 28rpx;
						height: 28rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}

		}
		.bm{
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			align-items: center;
			.zfabu{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				display: inline-block;
				margin-right: 20rpx;
			}
			.img_tx{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.xm{
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}
			.xb{
				width: 30rpx;
				height: 30rpx;
				background: #DFFAFF;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #3EABFF;
				margin-left: 10rpx;
			}

			.bmleft{
				font-weight: 800;
				font-size: 44rpx;
				color: #EA5918;
			}
			.danwei{
				font-weight: bold;
				font-size: 24rpx;
				color: #EA5918;
			}
		}
		.hpl{
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			padding: 25rpx 0;
			margin: 20rpx 0;
			.plitem{
				flex: 1;
				display: flex;
				flex-direction: column;
				border-right: 1rpx solid rgba(204, 204, 204, 1);
				align-items: center;
				justify-content: center;
				.pnum{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}
				.pname{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
			.plitem:last-child{
				border-right: none;
			}
		}
	}
	.newbot{
		display: flex;
		flex-direction: column;
		// height: 200rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.wenxin{
		height: 80rpx;
		background: #FFEEE5;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		.wentit{
			border-radius: 6rpx;
			background-color: rgba(238, 127, 88, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 54rpx;
			height: 54rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #FF5142;
			text-align: center;
		}
		.tiwen{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			text{
				font-weight: 500;
				font-size: 20rpx;
				color: #EA5918;
			}
		}
	}
	.yuedu{
		height: 80rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		background-color: #fff;
		.icon_xz_n{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		.xy{
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
		}
		.xyhu{
			color: rgba(234, 89, 24, 1);
		}
	}
	.botview{
			height: 120rpx;
			background: #FFFFFF;
			width: 100%;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 10;
			// border-top: 1rpx solid #eee;
			padding: 0 30rpx 20rpx 30rpx;
			
			.botleft{
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.icon_fenxiang{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 5rpx;
				}
				text{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666;
				}
			}
			.lianxi{
				margin-left: auto;
				width: 60%;
				height: 90rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				.lname{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.lmiao{
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.yuwen{
				flex: 1;
				margin-right: 30rpx;
				height: 90rpx;
				background: #F5F5F5;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
			.liantwo{
				display: flex;
				flex-direction: row;
				flex: 1;
				.qubtn{
					height: 90rpx;
					width: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F5F5;
					border-radius: 45rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.queren{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
					margin-left: auto;
				}
			}
		}
	.zhanwei{
		height: 20rpx;
		width: 100%;
		background-color: #f6f6f6;
	}
	.botti{
		position: relative;
		// height: 387rpx;
		width: 100%;
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.tione{
			position: relative;
			width: 100%;
			height: 100%;
			.tihead{
				display: flex;
				flex-direction: column;
				margin: 60rpx 40rpx;
				.qname{
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
				.qnum{
					font-weight: 800;
					font-size: 36rpx;
					color: #EA5918;
					display: inline-block;
					margin: 0 8rpx;
				}
				.wushuang{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					display: block;
					margin-top: 8rpx;
				}
			}
			.tibot{
				height: 50%;
				width: 100%;
				position: relative;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				margin-top: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;
				// justify-content: center;
				.tiitem{
					// width: 120rpx;
					height: 120rpx;
					flex: 1;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1px solid #CCCCCC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// margin-right: 50rpx;
					margin: 0 25rpx;
					max-width: 120rpx;
					.giicon{
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
					}
				}
				.tiitem:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.olist{
		margin: 30rpx;
		.oitem{
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 25rpx;
			.ohead{
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				padding: 20rpx;
				.icon_jf{
					width: 87rpx;
					height: 87rpx;
					margin-right: 20rpx;
					border-radius: 50%;

				}
			}
			.yijie{
				position: absolute;
				right: 0;
				top: 0;
				background: #FFE8E3;
				border-radius: 0rpx 30rpx 0rpx 30rpx;
				padding: 4rpx 20rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FF5F40;
			}
			.yinav{
				flex: 1;
				display: flex;
				flex-direction: column;
				.name{
					font-weight: 800;
					font-size: 32rpx;
					color: #111111;
					display: block;
					margin-bottom: 10rpx;
				}
				.jienav{
					display: flex;
					flex-direction: row;
					align-items: center;
			        .bq{
						padding: 2rpx 10rpx;
						background: #F5F5F5;
						border-radius: 6rpx;
						margin-right: 15rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						display: flex;
						flex-direction: row;
						align-items: center;
					}
					.sxiao{
						background: #FFF5E9;
					}
					.icon_bz_s{
						width: 25rpx;
						height: 25rpx;
						margin-right: 5rpx;
					}
					.bname{
						font-weight: 500;
						font-size: 24rpx;
						color: #B97216;
					}
					.icon_ck_s{
						width: 24rpx;
						height: 24rpx;
					}
					.xq{
						margin-left: auto;
						display: flex;
						flex-direction: row;
						align-items: center;
						text{
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
						}
						.icon_gd{
							width: 24rpx;
							height: 24rpx;
							margin-left: 5rpx;
						}
					}


				}
				
			}
			.queren{
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				display: block;
				margin: 20rpx ;
			}

		}
		.ztbtn{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #eee;
			margin: 0 20rpx;
			.btns{
				padding: 14rpx 24rpx;
				
				background: #F5F5F5;
				border-radius: 34rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #000;
				margin-left: 20rpx;
				// min-width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.kaigongma{
		position: fixed;
		right: 10px;
		bottom: 3%;
		padding:15rpx 25rpx;
		background: #FF5F40;
			border-radius: 16rpx;
			// border: 4px solid #F5F5F5;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 100;
			.kainame{
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.kainum{
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				display: block;
				margin-top: 5rpx;
			}
		}
		.oqian{
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
		}
		.yanse{
			color: #FF5F40 !important;
			font-weight: 500 !important;
			font-size: 28rpx !important;
		}
		.lvtxt{
			color: #16B925 !important;
		}


		// 提示弹窗开始
		/deep/.u-mode-center-box{
			background-color: transparent;
		}

		.popone{
			width: 100%;
			background: #FFFFFF;
			border-radius: 30rpx;
			// height: 530rpx;
			.bg{
				position: absolute;
				width: 100%;
				height: 300rpx;
				border-radius: 30rpx 30rpx 0 0 ;
			}
			.icon_gbcha{
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
			}
			.yuedu{
				height: 80rpx;
				display: flex;
				padding: 0 30rpx;
				align-items: center;
				.icon_xz_n{
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
				.xy{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					display: block;
					width: 90%;
				}
				.xyhu{
					color: rgba(234, 89, 24, 1);
				}
			}
			.kaolv{
				font-weight: bold;
				font-size: 28rpx;
				color: #666666;
				display: block;
				text-align: center;
				margin-top: 20rpx;
			}
			.phonenav{
				position: relative;
				// margin: 30rpx;
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;
				padding: 40rpx 20rpx;
				.img_aq{
					width: 173rpx;
					height: 211rpx;
					margin-bottom: 20rpx;
				}
				.jiename{
					font-weight: bold;
					font-size: 36rpx;
					color: #111111;
				}
				.queren{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					display: block;
					margin: 40rpx 0 80rpx;
				}
				.chaka{
					padding: 30rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #F6F7F9;
					border-radius: 16rpx;
					margin: 25rpx 0;
					.chaname{
						font-weight: bold;
						font-size: 28rpx;
						color: #111111;
					}
					.phonenum{
						display: block;
						font-weight: bold;
						font-size: 50rpx;
						color: #F06047;
						margin: 10rpx 0;
					}
					.xiugai{
						display: flex;
						flex-direction: row;
						align-items: center;
						.noben{
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
						.xiu{
							font-weight: 400;
							font-size: 24rpx;
							color: #F06047;
							display: inline-block;
							margin-left: 6rpx;
						}
					}
				}
				.dianbtn{
					height: 90rpx;
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					border-radius: 45rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					margin-top: 20rpx;
					.bm{
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
					}
					.bmmaio{
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
				.bzhang{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 30rpx;
					.icon_ts{
						margin-right: 6rpx;
						width: 24rpx;
						height: 24rpx;
					}
					.zhiname{
						font-weight: 400;
						font-size: 20rpx;
						color: #F06047;
					}
				}
			}
		}
		.queli{
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 40rpx 0rpx 40rpx;
			justify-content: center;
			align-items: center;
			.queitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				margin-bottom: 20rpx;
				justify-content: center;
				.icon_xz_s{
					margin-right: 15rpx;
					width: 36rpx;
					height: 36rpx;
				}
				text{
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					max-width: 80%;
				}
			}
		}
		// 提示弹窗结束

		/deep/.u-drawer-bottom{
        background-color: transparent;
    }
    .queli-new{
        display: flex;
        flex-direction: column;
        width: 80%;
        // margin: 40rpx 0rpx 70rpx;
		border: 1rpx solid #333;
		padding:8rpx 20rpx;
		width: 100%;
		border-radius: 20rpx;
		margin: 40rpx 0;
        .queitem{
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            .icon_xz_s{
                margin-right: 15rpx;
                width: 36rpx;
                height: 36rpx;
            }
            text{
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
            }
        }
    }
	.popone-new{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        // height: 530rpx;
        .kaiview{
            display: flex;
            flex-direction: row;
            align-items: center;
			justify-content: center;
        }
        .kaimiao{
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            display: block;
            margin-top: 10rpx;
            margin-bottom: 30rpx;
        }
        .kaiswitch{
            margin-left: 20rpx;
        }
        .lone{
            display: flex;
            flex-direction: row;
            align-items: center;
            // margin-top: 30rpx;
            margin-bottom: 20rpx;
            .shu{
                width: 40rpx;
                height: 40rpx;
                background: #FF5F40;
                border-radius: 50%;
                display: inline-block;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
                margin-right: 10rpx;
            }
            .ltxt{
                font-weight: 500;
                font-size: 26rpx;
                color: #333333;
            }
            .bzhang{
                display: flex;
                flex-direction: column;
                // justify-content: flex-start;
                // align-items: flex-start;

                max-width: 100%;
            }
            .ltxtmiao{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: inline-block;
            }
        }
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav-new{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            // align-items: center;
            padding: 40rpx 40rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 40rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
    .renlian{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .img_rlts{
            width: 400rpx;
            height: 400rpx;
            margin-bottom: 32rpx;
        }
        .img_sczjz{
            width: 199rpx;
            height: 245rpx;
            margin: 50rpx 0 45rpx;
        }
        text{
            font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			display: block;
			text-align: center;
        }
    }
    .kmiao{
        font-weight: 500;
        font-size: 28rpx;
        color: #111111;
        display: block;
        margin: 40rpx 0 20rpx;
    }
    .renxie{
        font-weight: 500;
        font-size: 28rpx;
        color: #FF8C39;
        display: block;
        margin-bottom: 50rpx;
    }
    .img_cg{
        width: 140rpx;
        height: 140rpx;
        margin-bottom: 15rpx;
    }
    .yikai{
        font-weight: bold;
        font-size: 36rpx;
        color: #111111;
    }
    .kaiti{
        background: #E9FFEB;
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 20rpx 0 15rpx;
        padding:20rpx 10rpx;
        .kaione{
            display: flex;
            flex-direction: row;
            align-items: center;
            .icON_bz{
                margin-right: 7rpx;
                width: 24rpx;
                height: 24rpx;
            }
            .jianame{
                font-weight: bold;
                font-size: 28rpx;
                color: #16B925;
            }
        }
        .youxiao{
            font-weight: 500;
            font-size: 20rpx;
            color: #16B925;
            display: block;
            margin-top: 10rpx;
        }
    }
    .jishi{
        display: flex;
        flex-direction: column;
        .shiitem{
            background: #FFFFFF;
            border-radius: 30rpx;
            padding: 30rpx;
            margin-bottom: 30rpx;
            .shione{
                display: flex;
                flex-direction: row;
                align-items: center;
                .ygname{
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #111111;
                }
                .icon_xz_s{
                    margin-left: auto;
                    width: 36rpx;
                    height: 36rpx;
                }
            }
            .dakaone{
                width: 100%;
                height: 160rpx;
                margin-top: 15rpx;
            }
        }
    }
</style>
